<template>
	<view> 
		<scroll-view scroll-x class="bg-white nav">
				<view class="main">
					<view class="main-box">
						<form>
							<view class="cg-main">
								<view class="sticky">
						            <view class="cu-form-group">  
							             <view class="title">单据类型：　配送出库单</view>
							              <!-- <input class="inpt"  name="input"  v-model="BillNo" ></input> -->
						           </view>
									<view class="cu-form-group"　@tap="open('QS_Picekr_date',0)">
										<view class="title">单据日期：　{{timeData.fulldate}}</view>
									</view>
									<view class="cu-form-group" @tap="open('QS_Picekr_date',1)">
										<view class="title">结束日期：　{{timeData1.fulldate}}</view>
									</view>
									<!-- <view class="cu-form-group" @click="supplier">
										<view class="title" >供应商:</view>
							        </view> -->
									<view class="cu-form-group">
									      <view class="title">单　　号：</view>
									       <input placeholder="请输入单号"  v-model="BillNo" ></input>
									</view>
									</view>
					<view class="cu-form-group" >
						<button class="cu-btn  stop text-white btn_width" @click="SelBill">查询</button>
						<!-- <input class="inpt" name="input" disabled="true"></input> -->
						<!-- <button class="cu-btn  stop text-white btn_width btn_color" @click="addSelectGoods">上传</button> -->
						<button class="cu-btn  stop text-white btn_width" @click="electGoods">选择</button>
						<!-- <button class="cu-btn  stop text-white btn_width" @click="toDetail()">选择</button> -->
						<!-- <button class="cu-btn  stop text-white btn_width" @click="selectcheck">全选</button> -->
						<button class="cu-btn  stop text-white btn_width" @click="swits()">切换</button>
						<!-- elect -->
					</view>
					
				
							</view>
						</form>
					</view>
				</view>
				
				<!-- 表格home -->
				<view class="orderList" :style="{height: orderListHeight + 'px'}" v-show="switrs == 1">
					<view class="orderNav" :style="{width:tdAllWidth+'px'}">
				
						<text :style="{width:tdWidth[0]+'px'}">序号</text>
						<text :style="{width:tdWidth[1]+'px'}">选择</text>
						<text :style="{width:tdWidth[2]+'px'}">单号</text>
						<text :style="{width:tdWidth[3]+'px'}">日期</text>
						<text :style="{width:tdWidth[4]+'px'}">调出仓库</text>
						<text :style="{width:tdWidth[5]+'px'}">调入仓库</text>
						<text :style="{width:tdWidth[6]+'px'}">业务员</text>
						<!-- <text :style="{width:tdWidth[7]+'px'}">备注</text> -->
					</view>
					<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
						<view class="orderItem" v-for="(item,index) in tableList"  
										 :class="[{'background':!(index%2==0)}]"  :key="index" @click="checktr(index)">
							<view :style="{width:tdWidth[0]+'px'}">{{index+1}}</view>
							<view :style="{width:tdWidth[1]+'px'}">
								<radio  :checked="index == checkindex" @click.stop="radiocheck(index)" />
							</view>
							<view :style="{width:tdWidth[2]+'px'}">{{item.BillNo}}</view>
							<view :style="{width:tdWidth[3]+'px'}">{{timesubstr(item.BillTime)}}</view>
							<view :style="{width:tdWidth[4]+'px'}">{{item.stockName}}</view>
							<view :style="{width:tdWidth[5]+'px'}">{{item.stockName2}}</view>
							<view :style="{width:tdWidth[6]+'px'}">{{item.EName}}</view>
							<!-- <view :style="{width:tdWidth[7]+'px'}">{{item.Comment}}</view> -->
						</view>
					</view>
				</view>
				<view class="box_list"  style="background-color: #EEEEEE;" v-show="switrs == 2">
					<view v-for="(item,index) in tableList" :key="item.id" @click="checktr(index)"   :class="['item_list',{'item_table':index == homeunfold}] "  >
						<p>单号：{{ item.BillNo }} <span style="position: absolute;right: 10px;top: 5px;">
						<radio  :checked="index == checkindex" @click.stop="radiocheck(index)" />
						<!-- <img :src="index == checkindex?'../../../static/image/seccess.png':'../../../static/image/noseccess.png'"
						 @click.stop="radiocheck(index)" style="width: 35px;height: 35px;" alt=""> -->
						</span></p>
						
						<p>日期：{{timesubstr(item.BillTime)}}</p>
						<p>调出仓库：{{ item.stockName }}</p>
						<p>调入仓库：{{ item.stockName2 }}</p>
						<p>业务员：{{ item.EName }}</p>
						<!-- <p>备注：{{ item.Comment }}</p> -->
						<div class="radius" @click.stop="Isunfolds(index)">
							<!-- <div class="d3" v-if="index != homeunfold"></div>
							<div class="d4" v-else></div> -->
							<span v-if="index != homeunfold">展开</span>
							<span v-else>收起</span>
						</div>
					</view>
				</view>
				<!-- 表格end -->
			</scroll-view>
			<!-- 时间选择器 -->
			<QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
			 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
			 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
			 <view class="clickscrolltop" v-show="istop" @click="clicktop">返回</br>顶部</view>
	</view>
	
</template>

<script>
	import allConst from "../../../Json.js"
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue';
	import * as GetApi from '@/syApis/syHttp/Http.js';
	export default {
		data() {
			return {
				isShowGoodsType: 0,
				date: '',
                selectcheckall:1,// 全选
				checklist:-1,
				homeunfold:-1,// 展开
				switrs:2, //主界面风格切换
				timeData: {
					clockinfo: '',
					date: '',
					fulldate: '',
					lunar: '',
					month: '',
					range: '',
					year: ''
				},
				timeData1: {
					fulldate: '',
				},
				isdata:0,//判断是开始日期还是结束日期
				BillNo:"",//单号
				//单据类型
				BillType:15,
				IsAdd:0,
				BillDate:"",
				setfixeds:false,//是否固定在顶部
				istop:false,
				tableList: [],
				checkindex:-1,//单选选中
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']
				},
				orderListHeight: 0,
				orderLiHeight: 0,
				orderList: [],
				tdWidth: [50, 60, 125, 125, 125, 125, 125],
			}
		},
		computed: {
			tdAllWidth() {
				var tdAllWidth = 0;
				this.tdWidth.forEach(item => {
					tdAllWidth += parseFloat(item);
				});
				tdAllWidth += this.tdWidth.length - 1;
				return tdAllWidth;
			}
		},
		//页面加载完成获取高度
		onReady(){
			var that = this
			uni.getSystemInfo({
			　　success: function(res) { // res - 各种参数
			　	let main = uni.createSelectorQuery().select(".cg-main");
			　　　  　main.boundingClientRect(function(data) { //data - 各种参数
			// 　　　  　console.log("元素的高度"+data.height)  // 获取元素宽度
			        console.log(data)
					 // 剩余的高度
					 // orderListHeight: 300,
					 // orderLiHeight: 260,
					 that.orderListHeight = res.windowHeight - data.height;
					 that.orderLiHeight = (res.windowHeight - data.height) - 40;
					 // that.orderListHeight = res.windowHeight - (6*37);
					 // that.orderLiHeight = (res.windowHeight - (6*37)) - 40;
					 console.log('剩余的高度')
					 console.log(that.orderListHeight)
					 console.log('表格内容的高度')
					 console.log(that.orderLiHeight)
					 // 表格内容的高度
					 console.log((res.windowHeight - data.height) - 40)
			　　    }).exec()
			       }
			});
		},
		onPageScroll(res){
			// console.log(res.scrollTop);//距离页面顶部距离
			var scrolls = res.scrollTop
			var that = this
		    
			uni.getSystemInfo({
			　　success: function(res) { // res - 各种参数
			// 　　   console.log(res); // 屏幕的宽度 
			         // console.log('返回顶部出现的位置'+(res.screenHeight+res.screenHeight/3))
			// 　　    let info = uni.createSelectorQuery().select(".sticky");
			// 　　　  　info.boundingClientRect(function(data) { //data - 各种参数
					 
					
			// 　　    }).exec()
			 that.istop = scrolls>(res.screenHeight+res.screenHeight/2)?true:false
			       }
			});
		},
		components: {
			QSpicker,
			uniIcon,
		},
		onLoad() {
			setTimeout(() => {
				this.showCalendar = true
			}, 350);
		},
		created(){
			let date = new Date();
			this.BillDate = GetApi.splitdate(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
			//初始化默认赋值今天日期
			this.timeData.fulldate = this.BillDate
			this.timeData1.fulldate = this.BillDate
		},
		methods: {
			//跳转到明细
		checktr:function(e){
				let Detailid =  this.tableList[e]['BillID']
				let BillNo = this.tableList[e]['BillNo']
				uni.navigateTo({
				    url: '../../deliveryreturn/delivreturn_quote/quoteDetail/quoteDetail?id='+Detailid+'&BillNo='+BillNo
				});
			},
			//单选 可以取消
			radiocheck:function(evt){
				// this.checkindex = evt
				this.checkindex = this.checkindex==evt?-1:evt
			},
			// 选择
			electGoods:function(){
				if(this.checkindex == -1){
					GetApi.showTip("请选择单据!");
					return
				}
				this.tableList[this.checkindex]["BillTime"] = this.BillDate;//引用单据需要赋值今天日期
				// console.log('返回的参数')
				// console.log(this.tableList[this.checkindex])
				this.$eventHub.$emit('deliveryreturnfire',this.tableList[this.checkindex]);//携带参数返回
				this.$eventHub.$off('deliveryreturnfire');
				uni.navigateBack({
					delta:1
				})
			},
			clicktop:function(){
							 uni.pageScrollTo({
							 scrollTop: 0,
							 duration: 300
							 });
							 console.log('这是一个点击事件')
							 console.log('打印打印')
			},
			//是否展开
			Isunfolds:function(e){
				this.homeunfold = this.homeunfold == e?-1:e
			},

			back:function(){
				this.Detail = false
			},
			//取消
			closemodel:function(){
				this.isshow = false
			},
			open(name, type) {
				this.isdata = type;//赋值给isdata用于判断是开始日期还是结束日期
				this.$refs[name].show();
				this.dateName = name;
			},
			confirm(res) {
				// var fulldate = e.detail.fulldate
				// console.log(e.detail.fulldate);
				// console.log('这是一个打印')
				// console.log(this.isdata)
				console.log(res)
				
				var data = GetApi.splitdate(res.data);//处理的日期
				console.log(data)
				// 1是开始日期 2是结束日期
				if(this.isdata == 0){
					// console.log(e)
					this.timeData.fulldate = data
				}else if(this.isdata == 1){
					this.timeData1.fulldate = data
				}
				this.$refs[this.dateName].hide();
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {
			
			},
			//查询
			SelBill(){
			    if(this.timeData.fulldate == "" || this.timeData.fulldate==undefined){
					GetApi.showTip("单据时间不能为空")
				}else if(this.timeData1.fulldate == "" || this.timeData1.fulldate==undefined){
					GetApi.showTip("结束时间不能为空")
				}
				else{
					var that = this;
					that.tableList = [] //先清空原来的数据
					let ClientID = uni.getStorageSync("UserCode");
					let CreateName = uni.getStorageSync("UserName");
					let isnullBillNo =  this.BillNo==""?'':  ' and '+"[BillNo] like '%"+this.BillNo+"%'";//如果为空则不传
					
					let data = {
						BillType:15,
						Database:'FastApp',
						SourceBillName:'配送出库单',
						Filter:"[BillTime]>='"+that.timeData.fulldate  +"'●and●[BillTime]<='"+that.timeData1.fulldate+"'"
						+ isnullBillNo,
					};
					GetApi.Check_ZP_Select_Bill_Master(data,function(res){
						  if(res.state){
							   if(res.data.ErrorMsg=="获取登录信息失败"){
								   GetApi.showTip("登录超时");
							   }else if(res.data.ErrorMsg!=""){
								   GetApi.showTip(res.data.ErrorMsg);
							   }else if(res.data.TipsMsg == "OK" && res.data.ResultMsg == ""){
								   GetApi.showTip("查无数据");
							   }else{
								     console.log(res.data.ResultMsg);
									that.tableList = res.data.ResultMsg
							   }
						  }else{
							  GetApi.showTip("服务器错误!");
						  }
					});
				}
			},
			// 列表与表格切换
			swits:function(){
				this.switrs = this.switrs == 1?2:1
			},

			 // 日期截取
			 timesubstr:function(e){
				 return e == "" || e == undefined?"":e.substring(0,10)
				 // return e.substring(0,10)
			 },
			 //保留两位小数
			 toFix:function(evt){
				 if(evt == ""|| evt==undefined){
					 return evt
				 }
				 evt = parseFloat(evt);
				 return evt.toFixed(2)//此处2为保留两位小数
			 }
		}

	}
</script>

<style lang="scss">
	@import url("delivreturn_quote.css");
	page {
		background-color: #EEEEEE;
		padding-bottom: 0upx;
		height: 100%;
	}
	/* //表格单据 */
	.orderList {
		width: 100%;
		overflow: auto;
		box-sizing: border-box;
	
		text {
			float: left;
			text-align: center;
			box-sizing: border-box;
			height: 40px;
			line-height: 40px;
			border-right: 1px solid #CCC;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
	
			&:last-child {
				border: none;
			}
		}
	
		.orderNav {
			height: 40px;
			line-height: 40px;
			box-sizing: border-box;
			overflow: hidden;
			border-top: 1px solid #CCC;
			border-left: 1px solid #FFF;
			background: #FFF;
	
		}
	
		.orderLi {
	
			background: #ebebeb;
			overflow: auto;
	
			.orderItem {
				height: 40px;
				line-height: 40px;
				width: 100%;
				border: 1px solid #ebebeb;
				box-sizing: border-box;
				display: table;
				border-bottom: 1px solid #CCCCCC;
	
				view {
					display: inline-block;
					height: 100%;
					line-height: 35px;
					float: left;
					text-align: center;
					border-right: 1px solid #CCC;
					box-sizing: border-box;
					padding-top: 5upx;
					padding-bottom: 5upx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
	
					image {
						width: 60px;
						margin: auto;
						display: table;
					}
	
					&:last-child {
						border: none;
					}
	
				}
			}
		}
		.background{
			background-color: #fff;
		}
	
		.allPrice {
			@extend .orderNav;
			background: rgba(124, 170, 216, 1);
			color: #FFF;
		} 
	}
	.cu-form-group{
		min-height: 86upx;
	}
	.cu-form-group>input{
			font-size: 28upx;
		}

	
</style>
